<template>
  <a-modal
    v-model:open="visible"
    title="代码智能与解题分析"
    width="1700px"
    :footer="null"
    :maskClosable="false"
    class="ai-analysis-modal"
    @cancel="handleClose"
    :bodyStyle="{ height: '80vh', padding: 0 }"
  >
    <div class="modal-content">
      <!-- 左侧内容区域 -->
      <div class="left-panel">
        <!-- 题目描述区域 -->
        <div class="problem-section">
          <div class="section-header">
            <span class="problem-title">{{ questionData?.title || '[zijian0001]两数之和' }}</span>
            <a-tag color="orange" size="small">简单</a-tag>
          </div>
          <div class="problem-content">
            <ProblemDescription :question-data="questionData" />
          </div>
        </div>

        <!-- 提交代码区域 -->
        <div class="code-section">
          <div class="section-header">
            <span class="section-title">提交代码</span>
          </div>
          <div class="code-editor-container">
            <div ref="codeEditorRef" class="code-editor"></div>
          </div>
        </div>
      </div>

      <!-- 右侧AI分析区域 -->
      <div class="right-panel">
        <div class="ai-header">
          <div class="ai-title">
            <span class="title-icon">🤖</span>
            <span class="title-text">AI 智能分析</span>
          </div>
        </div>

        <div class="ai-content">
          <!-- 分析生成中状态 -->
          <div v-if="isAnalyzing" class="analyzing-state">
            <div class="loading-animation">
              <div class="loading-dots">
                <div class="dot dot1"></div>
                <div class="dot dot2"></div>
                <div class="dot dot3"></div>
              </div>
            </div>
            <div class="analyzing-text">
              <div class="main-text">AI 正在分析代码中，请稍候...</div>
              <div class="sub-text">正在对代码进行分析，查找问题并生成优化建议</div>
            </div>
          </div>

          <!-- 分析结果展示 -->
          <div v-else-if="analysisResult" class="analysis-result">
            <div class="result-sections">
              <!-- 1. 代码正确性 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">✅</span>
                  代码正确性
                </h3>
                <div class="analysis-content">
                  <div class="correctness-score">
                    <div class="score-circle">
                      <div class="score-text">{{ analysisResult.correctnessScore || 92 }}</div>
                      <div class="score-label">分</div>
                    </div>
                    <div class="score-desc">代码逻辑正确，通过所有测试用例</div>
                  </div>
                  <div class="correctness-details">
                    <div class="detail-item">
                      <span class="label">语法检查：</span>
                      <span class="value excellent">通过</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">逻辑检查：</span>
                      <span class="value excellent">正确</span>
                    </div>
                    <div class="detail-item">
                      <span class="label">测试用例：</span>
                      <span class="value excellent">8/8 通过</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 2. 代码风格 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">🎨</span>
                  代码风格
                </h3>
                <div class="analysis-content">
                  <div class="style-items">
                    <div class="style-item">
                      <div class="style-type good">命名规范</div>
                      <div class="style-desc">变量名基本符合驼峰命名规范</div>
                      <div class="style-score">85分</div>
                    </div>
                    <div class="style-item">
                      <div class="style-type excellent">代码格式</div>
                      <div class="style-desc">缩进和空格使用规范</div>
                      <div class="style-score">95分</div>
                    </div>
                    <div class="style-item">
                      <div class="style-type warning">注释质量</div>
                      <div class="style-desc">缺少关键逻辑注释</div>
                      <div class="style-score">65分</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 3. 性能优化 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">⚡</span>
                  性能优化
                </h3>
                <div class="analysis-content">
                  <div class="performance-analysis">
                    <div class="complexity-item">
                      <span class="complexity-label">时间复杂度：</span>
                      <span class="complexity-value warning">O(n²)</span>
                      <span class="complexity-suggestion">可优化为 O(n)</span>
                    </div>
                    <div class="complexity-item">
                      <span class="complexity-label">空间复杂度：</span>
                      <span class="complexity-value good">O(1)</span>
                      <span class="complexity-suggestion">已优化</span>
                    </div>
                    <div class="optimization-suggestions">
                      <div class="suggestion-title">优化建议：</div>
                      <ul class="suggestion-list">
                        <li>使用哈希表替代嵌套循环</li>
                        <li>避免重复计算</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 4. 安全检查 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">🔒</span>
                  安全检查
                </h3>
                <div class="analysis-content">
                  <div class="security-items">
                    <div class="security-item">
                      <div class="security-type good">输入验证</div>
                      <div class="security-desc">对输入参数进行了基本验证</div>
                    </div>
                    <div class="security-item">
                      <div class="security-type warning">异常处理</div>
                      <div class="security-desc">缺少边界条件的异常处理</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 5. 代码复用 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">♻️</span>
                  代码复用
                </h3>
                <div class="analysis-content">
                  <div class="reuse-analysis">
                    <div class="reuse-item">
                      <span class="reuse-label">重复代码：</span>
                      <span class="reuse-value excellent">无</span>
                    </div>
                    <div class="reuse-item">
                      <span class="reuse-label">可提取函数：</span>
                      <span class="reuse-value info">1处</span>
                    </div>
                    <div class="reuse-suggestions">
                      <div class="suggestion-title">建议：</div>
                      <p>可将输入解析逻辑提取为独立函数</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 6. 代码可读性 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">📖</span>
                  代码可读性
                </h3>
                <div class="analysis-content">
                  <div class="readability-score">
                    <div class="score-circle small">
                      <div class="score-text">{{ analysisResult.readabilityScore || 78 }}</div>
                      <div class="score-label">分</div>
                    </div>
                    <div class="readability-details">
                      <div class="detail-item">
                        <span class="label">圈复杂度：</span>
                        <span class="value good">3</span>
                      </div>
                      <div class="detail-item">
                        <span class="label">代码行数：</span>
                        <span class="value excellent">适中</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 7. 代码创新性 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">💡</span>
                  代码创新性
                </h3>
                <div class="analysis-content">
                  <div class="innovation-analysis">
                    <div class="innovation-item">
                      <span class="innovation-label">算法创新：</span>
                      <span class="innovation-value warning">传统方法</span>
                    </div>
                    <div class="innovation-item">
                      <span class="innovation-label">代码简洁性：</span>
                      <span class="innovation-value good">良好</span>
                    </div>
                    <div class="innovation-suggestions">
                      <div class="suggestion-title">创新建议：</div>
                      <p>可尝试使用更高效的算法或数据结构</p>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 8. 代码完整性 -->
              <div class="result-section">
                <h3 class="section-title">
                  <span class="icon">🎯</span>
                  代码完整性
                </h3>
                <div class="analysis-content">
                  <div class="completeness-items">
                    <div class="completeness-item">
                      <div class="completeness-type excellent">功能完整性</div>
                      <div class="completeness-desc">实现了题目要求的所有功能</div>
                    </div>
                    <div class="completeness-item">
                      <div class="completeness-type good">边界条件</div>
                      <div class="completeness-desc">处理了大部分边界条件</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 初始状态 -->
          <div v-else class="initial-state">
            <div class="empty-icon">🤖</div>
            <div class="empty-text">点击开始分析按钮，AI将为您分析代码</div>
          </div>
        </div>

        <!-- 底部操作按钮 -->
        <div class="ai-actions">
          <a-button
            type="primary"
            :loading="isAnalyzing"
            @click="startAnalysis"
            class="analyze-btn"
          >
            {{ isAnalyzing ? '分析中...' : '开始分析' }}
          </a-button>
          <a-button @click="handleClose" class="close-btn"> 关闭 </a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, onUnmounted, watch } from 'vue'
import * as monaco from 'monaco-editor'
import ProblemDescription from './programtabs/ProblemDescription.vue'

// Props
interface Props {
  visible: boolean
  questionData?: any
  submissionData?: any
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  questionData: null,
  submissionData: null,
})

// Emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
  close: []
}>()

// 响应式数据
const visible = ref(props.visible)
const isAnalyzing = ref(false)
const analysisResult = ref<any>(null)
const codeEditorRef = ref<HTMLElement>()
let codeEditor: monaco.editor.IStandaloneCodeEditor | null = null

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    visible.value = newVal
    if (newVal) {
      // 模态框打开时初始化编辑器
      setTimeout(() => {
        initCodeEditor()
      }, 100)
    }
  },
)

watch(visible, (newVal) => {
  emit('update:visible', newVal)
})

// 初始化代码编辑器
const initCodeEditor = () => {
  if (!codeEditorRef.value) return

  // 销毁现有编辑器
  if (codeEditor) {
    codeEditor.dispose()
  }

  // 创建新编辑器
  codeEditor = monaco.editor.create(codeEditorRef.value, {
    value: getSubmittedCode(),
    language: 'java',
    theme: 'vs-dark',
    readOnly: true, // 只读模式
    minimap: { enabled: false },
    scrollBeyondLastLine: false,
    fontSize: 14,
    lineNumbers: 'on',
    glyphMargin: false,
    folding: false,
    lineDecorationsWidth: 0,
    lineNumbersMinChars: 3,
    renderLineHighlight: 'none',
  })

  // 自适应高度
  const resizeEditor = () => {
    if (codeEditor) {
      codeEditor.layout()
    }
  }

  window.addEventListener('resize', resizeEditor)
}

// 获取提交的代码
const getSubmittedCode = () => {
  return (
    props.submissionData?.code ||
    `// 从两个数字中找出它们的和等于目标值，并返回它们的索引。
public class Main {
    public static void main(String[] args) {
        int a = Integer.parseInt(args[0]);
        int b = Integer.parseInt(args[1]);
        System.out.print(a + b);
    }
}`
  )
}

// 开始AI分析
const startAnalysis = async () => {
  isAnalyzing.value = true

  // 模拟AI分析过程
  setTimeout(() => {
    isAnalyzing.value = false
    analysisResult.value = {
      // 1. 代码正确性
      correctnessScore: 92,
      syntaxCheck: 'pass',
      logicCheck: 'correct',
      testCases: '8/8',

      // 2. 代码风格
      styleAnalysis: {
        naming: { score: 85, status: 'good', desc: '变量名基本符合驼峰命名规范' },
        format: { score: 95, status: 'excellent', desc: '缩进和空格使用规范' },
        comments: { score: 65, status: 'warning', desc: '缺少关键逻辑注释' },
      },

      // 3. 性能优化
      performance: {
        timeComplexity: 'O(n²)',
        spaceComplexity: 'O(1)',
        optimizationSuggestions: ['使用哈希表替代嵌套循环', '避免重复计算'],
      },

      // 4. 安全检查
      security: {
        inputValidation: { status: 'good', desc: '对输入参数进行了基本验证' },
        exceptionHandling: { status: 'warning', desc: '缺少边界条件的异常处理' },
      },

      // 5. 代码复用
      reuse: {
        duplicateCode: 'none',
        extractableFunctions: 1,
        suggestion: '可将输入解析逻辑提取为独立函数',
      },

      // 6. 代码可读性
      readabilityScore: 78,
      cyclomaticComplexity: 3,
      codeLines: 'moderate',

      // 7. 代码创新性
      innovation: {
        algorithmInnovation: 'traditional',
        codeSimplicity: 'good',
        suggestion: '可尝试使用更高效的算法或数据结构',
      },

      // 8. 代码完整性
      completeness: {
        functionality: { status: 'excellent', desc: '实现了题目要求的所有功能' },
        boundaryConditions: { status: 'good', desc: '处理了大部分边界条件' },
      },
    }
  }, 3000)
}

// 关闭模态框
const handleClose = () => {
  visible.value = false
  emit('close')
}

// 组件卸载时清理编辑器
onUnmounted(() => {
  if (codeEditor) {
    codeEditor.dispose()
  }
})
</script>

<style scoped>
.ai-analysis-modal :deep(.ant-modal-content) {
  padding: 0;
  overflow: hidden;
  height: 85vh;
  display: flex;
  flex-direction: column;
}

.ai-analysis-modal :deep(.ant-modal-header) {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.ai-analysis-modal :deep(.ant-modal-body) {
  padding: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-content {
  display: flex;
  height: 100%;
  flex: 1;
}

/* 左侧面板 */
.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #f0f0f0;
  background: #fff;
}

.problem-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #f0f0f0;
  min-height: 0; /* 允许flex子项收缩 */
}

.code-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 允许flex子项收缩 */
}

.section-header {
  padding: 16px 20px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.problem-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.problem-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-height: 0; /* 确保可以滚动 */
}

.code-editor-container {
  flex: 1;
  position: relative;
  padding: 10px;
}

.code-editor {
  width: 100%;
  height: 100%;
}

/* 右侧面板 */
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.ai-header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.ai-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  font-size: 20px;
  animation: pulse 2s infinite;
}

.title-text {
  font-size: 16px;
  font-weight: 600;
  color: #1890ff;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.ai-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #fafbfc;
}

/* 分析中状态 */
.analyzing-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.loading-animation {
  margin-bottom: 24px;
}

.loading-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1890ff;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot1 {
  animation-delay: 0s;
}
.dot2 {
  animation-delay: 0.3s;
}
.dot3 {
  animation-delay: 0.6s;
}

@keyframes pulse {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.analyzing-text .main-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.analyzing-text .sub-text {
  font-size: 14px;
  color: #666;
}

/* 分析结果 */
.analysis-result {
  height: 100%;
  overflow-y: auto;
}

.result-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.result-section {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.result-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.analysis-content {
  padding: 16px;
}

/* 通用分数圆圈 */
.score-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.score-circle.small {
  width: 50px;
  height: 50px;
}

.score-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.score-label {
  font-size: 12px;
  line-height: 1;
}

.score-desc {
  color: #666;
  font-size: 14px;
}

/* 通用详情项 */
.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-item .label {
  color: #666;
  font-size: 14px;
}

.detail-item .value {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}

.value.excellent {
  background: #f6ffed;
  color: #52c41a;
}

.value.good {
  background: #fff7e6;
  color: #fa8c16;
}

.value.warning {
  background: #fff2e8;
  color: #fa541c;
}

.value.info {
  background: #e6f7ff;
  color: #1890ff;
}

/* 1. 代码正确性 */
.correctness-score {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.correctness-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 2. 代码风格 */
.style-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.style-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
}

.style-type {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.style-type.excellent {
  background: #f6ffed;
  color: #52c41a;
}

.style-type.good {
  background: #fff7e6;
  color: #fa8c16;
}

.style-type.warning {
  background: #fff2e8;
  color: #fa541c;
}

.style-desc {
  flex: 1;
  font-size: 14px;
  color: #333;
  margin: 0 12px;
}

.style-score {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

/* 3. 性能优化 */
.performance-analysis {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.complexity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.complexity-label {
  font-size: 14px;
  color: #666;
  min-width: 80px;
}

.complexity-value {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

.complexity-suggestion {
  font-size: 12px;
  color: #1890ff;
  margin-left: auto;
}

.optimization-suggestions {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #1890ff;
}

.suggestion-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.suggestion-list {
  margin: 0;
  padding-left: 20px;
}

.suggestion-list li {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* 4. 安全检查 */
.security-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.security-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
}

.security-type {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.security-type.good {
  background: #f6ffed;
  color: #52c41a;
}

.security-type.warning {
  background: #fff2e8;
  color: #fa541c;
}

.security-desc {
  flex: 1;
  font-size: 14px;
  color: #333;
}

/* 5. 代码复用 */
.reuse-analysis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reuse-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.reuse-label {
  font-size: 14px;
  color: #666;
}

.reuse-value {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.reuse-suggestions {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #1890ff;
}

.reuse-suggestions p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 6. 代码可读性 */
.readability-score {
  display: flex;
  align-items: center;
  gap: 16px;
}

.readability-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 7. 代码创新性 */
.innovation-analysis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.innovation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.innovation-label {
  font-size: 14px;
  color: #666;
}

.innovation-value {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}

.innovation-suggestions {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #1890ff;
}

.innovation-suggestions p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 8. 代码完整性 */
.completeness-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.completeness-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
}

.completeness-type {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.completeness-type.excellent {
  background: #f6ffed;
  color: #52c41a;
}

.completeness-type.good {
  background: #fff7e6;
  color: #fa8c16;
}

.completeness-desc {
  flex: 1;
  font-size: 14px;
  color: #333;
}

/* 初始状态 */
.initial-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  border: 2px dashed #e8e8e8;
  margin: 20px;
  padding: 40px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

.empty-text {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 底部操作 */
.ai-actions {
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.analyze-btn {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  border: none;
  border-radius: 8px;
  padding: 8px 24px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.analyze-btn:hover {
  background: linear-gradient(135deg, #40a9ff, #1890ff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}

.close-btn {
  border-color: #d9d9d9;
  border-radius: 8px;
  padding: 8px 24px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.close-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
  transform: translateY(-2px);
}
</style>
